<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <view class="main">
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="车辆ID"
                :value="carInfo.number"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="车牌号"
                :value="carInfo.vehicleNumber"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="车辆类型"
                :value="carInfo.vehicleTypeName"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="车辆规格"
                :value="carInfo.standard"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="实际载重量"
                :value="carInfo.weight"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="保险到期时间"
                :value="carInfo.insuranceTime"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="关联司机"
                :value="carInfo.deliveryName"></easy-cell-item>
            <easy-cell-item
                :showArrowRight="false"
                :showIcon="false"
                label="备注"
                :value="carInfo.remark"></easy-cell-item>
            <view class="easy-cell-item">
                <view class="flex-v-c">
                    <text class="label">照片</text>
                    <view class="photo">
                        <image
                            v-for="image in imgList"
                            class="img"
                            :src="easyGetImgUrl(image)"
                            :data-src="easyGetImgUrl(image)"
                            @tap="previewImage"
                            mode="aspectFill"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import easyCellItem from "@/components/easy/easy-cell-item.vue"
import storage from "@/uni-sub-base/utils/storage.js"
import { VehicleBingInfo } from "@/pages_tms/service/logistics.js"
export default {
    components: {
        easyCellItem,
    },
    data() {
        return {
            config: {
                title: "车辆信息",
                centerSlot: true,
            },
            userInfo: null,
            carInfo: {},
            imgList: [],
        }
    },
    mounted() {
        this.carInfoFn()
    },
    onShow() {
        this.userInfo = storage.getCache("userInfo")
        console.log(this.userInfo)
    },
    methods: {
        carInfoFn() {
            VehicleBingInfo().then((rsp) => {
                if (rsp.State == 1) {
                    this.carInfo = rsp.Data
                    if (rsp.Data.image) {
                        this.imgList = rsp.Data.image.split(",")
                    }
                } else {
                    this.easyToast(rsp.Msg)
                }
            })
        },
        //预览图片
        previewImage(e) {
            let looklist = []
            this.imgList.forEach((e, i, arr) => {
                arr[i] = this.easyGetImgUrl(e)
            })
            var current = e.target.dataset.src
            uni.previewImage({
                current: current,
                urls: this.imgList,
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.main {
    margin: $app-item-padding;
    border-radius: 8rpx;
    background: #ffffff;
}
.easy-cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: $app-page-padding 0;
    margin: 0 $app-page-padding;
    background: $color-white;
    border-bottom: solid 1rpx #f0f0f0;
    .icon {
        margin-right: 20rpx;
        color: $color-gray-1;
    }
    .label {
        font-size: $font-size-30;
        color: $color-gray-1;
        width: 175rpx;
    }
    .value {
        display: flex;
        justify-content: flex-end;
        color: $app-color-text-tip;
        font-size: $font-size-30;
    }
    .icon-arrow-right {
        margin-left: 20rpx;
        color: $color-gray-1;
    }
}
.easy-cell-item:last-child {
    border-bottom: none;
}
.photo {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    flex-wrap: wrap;
    image {
        width: 128rpx;
        height: 128rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
        border-radius: 8rpx;
    }
}
</style>
